<template>
  <div id="bodypage">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/homePage' }"><span id="mainpage">主页</span></el-breadcrumb-item>
      <el-breadcrumb-item><span>产羔信息</span></el-breadcrumb-item>
    </el-breadcrumb>
    <div>
      <!-- 搜索页 -->
      <el-dialog title="请输入检索信息" :visible.sync="dialogVisible[0].searchPage" width="450px" :before-close="handleClose">
        <el-form :model="searchData">
          <el-form-item label="母羊编号">
            <el-input type="number" autocomplete="off" v-model="searchData.eweNum"></el-input>
          </el-form-item>
          <el-form-item label="公羊编号">
            <el-input type="number" autocomplete="off" v-model="searchData.ramNum"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible[0].searchPage = false">取 消</el-button>
          <el-button type="success" @click="upSearchData">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 新增页 -->
      <el-dialog title="敏盖羊只产羔信息表" :visible.sync="dialogVisible[1].addPage" width="950px" :before-close="handleClose">
        <el-form :inline="true" :model="inputValue">
          <el-form-item label="母羊编号" label-width="90px">
            <el-input type="number" v-model="inputValue.eweNum"></el-input>
          </el-form-item>
          <el-form-item label="公羊编号" label-width="90px">
            <el-input type="number" v-model="inputValue.ramNum"></el-input>
          </el-form-item>
          <el-form-item label="配种时间" label-width="90px">
            <el-input type="date" v-model="inputValue.matingTime"></el-input>
          </el-form-item>
        </el-form>

        <el-form :inline="true" :model="inputValue" class="demo-form-inline" ref="form">
          <el-form-item label="产羔时间" label-width="90px">
            <el-input type="date" v-model="inputValue.lambingTime"></el-input>
          </el-form-item>
          <el-form-item label="羔羊耳号" label-width="104px">
            <el-input type="number" v-model="inputValue.lambEarNum"></el-input>
          </el-form-item>
          <el-form-item label="性别" label-width="90px">
            <el-select v-model="inputValue.sex" placeholder="性别">
              <el-option label="公" value="公"></el-option>
              <el-option label="母" value="母"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-form :inline="true" :model="inputValue" class="demo-form-inline" ref="form">
          <el-form-item label="初生重(kg)" label-width="90px">
            <el-input type="number" v-model="inputValue.birthWeight"></el-input>
          </el-form-item>
          <el-form-item label="单双羔" label-width="90px">
            <el-select v-model="inputValue.SD_lambs" placeholder="性别">
              <el-option label="单" value="单"></el-option>
              <el-option label="双" value="双"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible[1].addPage = false">取 消</el-button>
          <el-button type="success" @click="add">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 查看与编辑页 -->
      <el-dialog title="敏盖羊只产羔信息表" :visible.sync="dialogVisible[2].checkPage" width="950px" :before-close="handleClose">
        <el-form :inline="true" :model="row">
          <el-form-item label="母羊编号" label-width="90px">
            <el-input type="number" v-model="row.母羊编号"></el-input>
          </el-form-item>
          <el-form-item label="公羊编号" label-width="90px">
            <el-input type="number" v-model="row.公羊编号"></el-input>
          </el-form-item>
          <el-form-item label="配种时间" label-width="90px">
            <el-input type="date" v-model="row.配种时间"></el-input>
          </el-form-item>
        </el-form>

        <el-form :inline="true" :model="row" class="demo-form-inline" ref="form">
          <el-form-item label="产羔时间" label-width="90px">
            <el-input type="date" v-model="row.产羔时间"></el-input>
          </el-form-item>
          <el-form-item label="羔羊耳号" label-width="104px">
            <el-input type="number" v-model="row.羔羊耳号"></el-input>
          </el-form-item>
          <el-form-item label="性别" label-width="90px">
            <el-select v-model="row.性别" placeholder="性别">
              <el-option label="公" value="公"></el-option>
              <el-option label="母" value="母"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-form :inline="true" :model="row" class="demo-form-inline" ref="form">
          <el-form-item label="初生重(kg)" label-width="90px">
            <el-input type="number" v-model="row.初生重"></el-input>
          </el-form-item>
          <el-form-item label="单双羔" label-width="90px">
            <el-select v-model="row.单双羔" placeholder="性别">
              <el-option label="单" value="单"></el-option>
              <el-option label="双" value="双"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer">
          <el-button id="checkPageButton" type="danger" @click="update">修 改</el-button>
          <el-button type="success" @click="dialogVisible[2].checkPage = false">关 闭</el-button>
        </span>
      </el-dialog>
      <h2 style="margin: 10px 0 0 20px; color: #4b9100">敏盖羊只产羔信息表</h2>
      <template>
        <el-button @click="dialogVisible[0].searchPage = true" round type="success" slot="append" icon="el-icon-search"
          style="margin: 10px 0 10px 20px">搜索</el-button>

        <!--             这里v-if-->
        <el-button @click="dialogVisible[1].addPage = true" round type="success" slot="append" icon="el-icon-edit"
          style="margin: 10px 0 10px 10px">新增</el-button>
      </template>
      <!-- 表格区 -->
      <el-table max-height="550" :data="tableData.slice((queryInfo.pagenum - 1) * 10, queryInfo.pagenum * 10)"
        :header-cell-style="{ background: '#f5f7fa', color: '#606266' }" border stripe @row-click="getDetails">
        <el-table-column type="selection" width="35"></el-table-column>
        <el-table-column width="30px"><template slot-scope="scope">{{scope.$index + 1}}</template></el-table-column>
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="母羊编号:">
                <span>{{ props.row.母羊编号 }}</span>
              </el-form-item>
              <el-form-item label="公羊编号:">
                <span>{{ props.row.公羊编号 }}</span>
              </el-form-item>
              <el-form-item label="配种时间:">
                <span>{{ props.row.配种时间 }}</span>
              </el-form-item>
              <el-form-item label="产羔时间:">
                <span>{{ props.row.产羔时间 }}</span>
              </el-form-item>
            </el-form>
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="羔羊耳号:">
                <span>{{ props.row.羔羊耳号 }}</span>
              </el-form-item>
              <el-form-item label="性别">
                <span>{{ props.row.性别 }}</span>
              </el-form-item>
              <el-form-item label="初生重(kg):">
                <span>{{ props.row.初生重 }}</span>
              </el-form-item>
              <el-form-item label="单双羔:">
                <span>{{ props.row.单双羔 }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column sortable prop="母羊编号" label="母羊编号" align="center"></el-table-column>
        <el-table-column sortable prop="公羊编号" label="公羊编号" align="center"></el-table-column>
        <el-table-column sortable prop="配种时间" label="配种时间" align="center"></el-table-column>
        <el-table-column sortable prop="产羔时间" label="产羔时间" align="center"></el-table-column>
        <el-table-column sortable prop="羔羊耳号" label="羔羊耳号" align="center"></el-table-column>
        <el-table-column sortable prop="性别" label="性别" align="center"></el-table-column>
        <el-table-column sortable prop="初生重" label="初生重(kg)" align="center"></el-table-column>
        <el-table-column sortable prop="单双羔" label="单双羔" align="center"></el-table-column>

        <!--              这里v-if-->
        <el-table-column prop="Operate" label="操作" align="center" fixed="right" width="140">
          <template slot-scope="scope">
            <el-button-group>
              <el-tooltip class="item" effect="dark" content="查看编辑" placement="top-start" :enterable="false">
                <el-button @click="dialogVisible[2].checkPage = true" type="success" icon="el-icon-search"></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="删除此行" placement="top-end" :enterable="false">
                <el-button type="success" icon="el-icon-delete" @click="delteleItem(scope.row.母羊编号, scope.row.公羊编号)">
                </el-button>
              </el-tooltip>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination prev-text="上一页" next-text="下一页" @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum" :page-size="10" layout="prev, next" :total="queryInfo.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        searchData: {
          eweNum: null,
          ramNum: null,
        },
        tableData: [],
        inputValue: {
          eweNum: null,
          ramNum: null,
          matingTime: null,
          lambingTime: null,
          lambEarNum: null,
          sex: null,
          birthWeight: null,
          SD_lambs: null,
        },
        row: {},
        dialogVisible: [
          { searchPage: false },
          { addPage: false },
          { checkPage: false },
        ],
        queryInfo: {
          pagenum: 1, // 当前页码
          total: 1000000, //初始数据数
        },
      };
    },

    methods: {
      //获取10条数据
      async handleRequestGetInfo() {
        let { data } = await this.$axios({
          method: "post",
          url: "/GetChanGaoInfoList",
          data: {
            num: this.queryInfo.pagenum,
          },
        });
        //如果获取成功
        if (data.code === 0) {
          this.$message({
            type: "success",
            message: data.msg,
            duration: 1500,
          });
        } else {
          //获取失败
          return this.$message({
            type: "error",
            message: data.msg,
            duration: 1500,
          });
        }
        if (this.tableData.length == 0) {
          this.tableData = data.data.data;
          console.log("第一次获取数据");
        } else if (data.data.data.length < 10) {
          this.tableData = [...this.tableData, ...data.data.data];
          this.queryInfo.total = this.tableData.length;
          if (this.tableData.length % 10 != 0) {
            this.queryInfo.pagenum = Math.trunc(this.tableData.length / 10) + 1;
          } else {
            this.queryInfo.pagenum = this.tableData.length / 10;
          }
          console.log("最后一次获取数据");
        } else {
          this.tableData = [...this.tableData, ...data.data.data];
          console.log("第n次获取数据");
        }
      },
      //查询
      async searchDataRes() {
        let { data } = await this.$axios({
          method: "post",
          url: "/GetChanGaoInfoList/info",
          data: {
            eweNum: this.searchData.eweNum,
            ramNum: this.searchData.ramNum,
          },
        });
        //如果查询成功
        if (data.code === 0) {
          this.$message({
            type: "success",
            message: data.msg,
            duration: 1500,
          });
        } else {
          //查询失败
          return this.$message({
            type: "error",
            message: data.msg,
            duration: 1500,
          });
        }

        this.tableData = data.data.data;
        this.queryInfo.pagenum = 1;
        this.queryInfo.total = this.tableData.length;
      },
      //搜索弹出框控制函数
      upSearchData() {
        this.searchDataRes();
        this.dialogVisible[0].searchPage = false;
      },
      //新增
      async add() {
        console.log("添加开始");
        let { data } = await this.$axios({
          method: "post",
          url: "/GetChanGaoInfoList/add",
          data: {
            eweNum: this.inputValue.eweNum,
            ramNum: this.inputValue.ramNum,
            matingTime: this.inputValue.matingTime,
            lambingTime: this.inputValue.lambingTime,
            lambEarNum: this.inputValue.lambEarNum,
            sex: this.inputValue.sex,
            birthWeight: this.inputValue.birthWeight,
            SD_lambs: this.inputValue.SD_lambs,
          },
        });
        console.log("添加结束");
        console.log(data);
        //如果添加成功
        if (data.code === 0) {
          this.$message({
            type: "success",
            message: data.msg,
            duration: 1500,
          });
        } else {
          //添加失败
          return this.$message({
            type: "error",
            message: data.msg,
            duration: 1500,
          });
        }
        this.dialogVisible[1].addPage = false;
        location.reload();
      },
      // 删除当前行数据
      async delteleItem(母羊编号, 公羊编号) {
        const confirmResult = await this.$messagebox
          .confirm("此操作将永久删除该信息, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "error",
          })
          .catch((err) => err);
        if (confirmResult != "confirm") {
          return this.$message.info("已取消删除");
        }
        console.log();
        let { data } = await this.$axios({
          method: "post",
          url: "/GetChanGaoInfoList/delete",
          data: {
            eweNum: 母羊编号,
            ramNum: 公羊编号,
          },
        });
        //如果删除成功
        if (data.code === 0) {
          this.$message({
            type: "success",
            message: data.msg,
            duration: 1500,
          });
        } else {
          //删除失败
          return this.$message({
            type: "error",
            message: data.msg,
            duration: 1500,
          });
        }
        console.log(data);
        location.reload();
      },
      //编辑更新
      async update() {
        console.log("更新开始");
        console.log(this.row);
        let { data } = await this.$axios({
          method: "post",
          url: "/GetChanGaoInfoList/update",
          data: {
            eweNum: this.row.母羊编号,
            ramNum: this.row.公羊编号,
            matingTime: this.row.配种时间,
            lambingTime: this.row.产羔时间,
            lambEarNum: this.row.羔羊耳号,
            sex: this.row.性别,
            birthWeight: this.row.初生重,
            SD_lambs: this.row.单双羔,
          },
        });
        console.log("更新结束");
        console.log(data);
        //如果更新成功
        if (data.code === 0) {
          this.$message({
            type: "success",
            message: data.msg,
            duration: 1500,
          });
        } else {
          //更新失败
          return this.$message({
            type: "error",
            message: data.msg,
            duration: 1500,
          });
        }
        this.dialogVisible[2].checkPage = false;
        location.reload();
      },

      getDetails(row) {
        this.row = row;
      }, // 获取表格当前行的数据
      //通用弹出框函数
      handleClose(done) {
        this.$messagebox
          .confirm("确认关闭？")
          .then((_) => {
            done();
          })
          .catch((_) => { });
      },

      // 改变页码值
      handleCurrentChange(newPage) {
        if (
          this.queryInfo.pagenum < newPage &&
          this.queryInfo.pagenum >= this.tableData.length / 10
        ) {
          setTimeout(this.handleRequestGetInfo, 0);
        }
        this.queryInfo.pagenum = newPage;
      },
    },
    created() {
      this.handleRequestGetInfo();
    },
  };
</script>

<style Lang="less" scoped>
  * {
    color: #4b9100;
  }

  .demo-table-expand {
    font-size: 10px;
  }

  .el-form>>>.el-form-item__label {
    width: 90px;
    color: #000000;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 20%;
  }
</style>